<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>zeh-关于我</title>
    <link href="../static/images/favicon.ico" th:href="@{/images/me.jpg}" rel="icon" type="image/x-ico">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
    <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">

</head>
<body>
<!--导航-->
<div th:replace="~{common/foot::topbar}"/>



<!--顶部背景图片-->
<div class="m-bg-type_outer" style="width: 100%;height: 10%">
<!--    <img src="../static/images/aboutbg.jpg" th:src="@{/images/aboutbg.jpg}" alt="" class="ui m-bg image" style="width: 100%;height: 100%">-->

</div>


<!--个人资料描述-->
<div class="ui container"  style="width:73%;">
    <div class="ui container m-opacity box-shadow-max " style="width: 60%;float:left"  >
        <div class="m-margin-top-small"  align="center"  style="height: 700px;">
                <img class="ui  image  box-shadow-max"   src="../static/images/city.jpg" th:src="@{/images/city.jpg}" style="width: 95%;height: 95%;">
            </div>
    </div>


<div class="ui container m-opacity box-shadow-max"  style="width: 30%; float: right;">
    <div class="ui segment m-margin-top-large" >
        <div class="m-margin-top-large animate__animated animate__rotateIn" align="center" >
            <img class="ui circular image  box-shadow-max"   src="../static/images/me.jpg" th:src="@{/images/me.jpg}" style="width: 150px;height: 150px; ">
        </div>
        <div class="m-margin-top-small" style="font-size: x-large;font-family: STSong" align="center">zeh</div>

        <div class="m-margin-top" align="center">
            <a href="#"  class="ui email circular icon button" data-content="1272052913" data-position="bottom center"><i class="qq icon"></i></a>
          <a href="https://gitee.com/zehcoding" target="_blank" class="ui github circular icon button" data-content="点击跳转码云" data-position="bottom center"><i class="github icon"></i></a>
            <a href="https://blog.csdn.net/qq_31795591?spm=1010.2135.3001.5343" target="_blank" class="ui csdn circular icon button" data-content="点击跳转CSDN" data-position="bottom center"><i class="copyright outline icon"></i></a>
            <a href="#" class="ui email circular icon button" data-content="1272052913@qq.com" data-position="bottom center"><i class="envelope  icon"></i></a>
        </div>
        <hr class="m-margin-top-small" style="width: 30%">
        <br>
        <div align="center" style="font-size: 20px; color: #47c3f0;font-family: 楷体">
            <p>软工一枚</p>
            <p>爱好，摄影，尤克里里</p>
        </div>
        <hr class="m-margin-top-large">
        <br>
        <h2 class="m-margin-tb-tiny" align="center" style="font-size: xx-large;font-weight: bold;color: #F08047;font-family: STSong">欢迎你来到本站！</h2>
        </div>
    </div>
</div>

<div style="clear:both"></div>
    </div>

<br>
<br>

<!--底部栏-->
<footer class="  segment m-padded-tb-massive m-opacity bg">
    <div class="ui center aligned container bg2 ">
      <span>技术支持：zeh<br>
     欢迎来访！</span>
    </div>
</footer>


<!--<footer class="ui inverted vertical segment m-padded-tb-massive m-opacity">-->
<!--    &lt;!&ndash;容器&ndash;&gt;-->
<!--    <div class="ui center aligned container">-->
<!--        <div class="ui inverted divided stackable grid">-->
<!--            <div class="four wide column">-->
<!--                <div style="font-size: large;font-weight: bold" class="ui inverted m-text-thin m-text-spaced m-margin-top-max" >联系我</div>-->
<!--                &lt;!&ndash;<div id="newblog-container">&ndash;&gt;-->
<!--                &lt;!&ndash;<div class="ui inverted link list" th:fragment="newblogList">&ndash;&gt;-->
<!--                &lt;!&ndash;<a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="item m-text-thin" th:each="blog : ${newblogs}" th:text="${blog.title}">最新文章</a>&ndash;&gt;-->
<!--                &lt;!&ndash;</div>&ndash;&gt;-->
<!--                &lt;!&ndash;</div>&ndash;&gt;-->
<!--                <div class="ui inverted link list">-->
<!--                    <div href="#" class="m-text-thin">Email：1272052913@qq.com</div>-->
<!--                    <div href="#" class="m-text-thin">QQ：1272052913</div>-->
<!--                </div>-->
<!--            </div>-->

<!--            <div class="four wide column" >-->
<!--                <div class="ui inverted link list">-->
<!--                    <div class="item">-->
<!--                        &lt;!&ndash;微信二维码&ndash;&gt;-->
<!--                        <div style="font-size: large;font-weight: bold" class="ui inverted m-text-thin m-text-spaced " >关注公众号</div>-->
<!--                        <img src="../static/images/oneStar.jpg" th:src="@{/images/oneStar.jpg}"  class="ui m-margin-top rounded image" alt="" style="width: 110px">-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->

<!--            <div class="four wide column">-->
<!--                <div class="ui inverted link list">-->
<!--                    <div class="item">-->
<!--                        &lt;!&ndash;微信二维码&ndash;&gt;-->
<!--                        <div style="font-size: large;font-weight: bold" class="ui inverted m-text-thin m-text-spaced " >问题交流（QQ群）</div>-->
<!--                        <img src="../static/images/QQ-question.jpg" th:src="@{/images/QQ-question.jpg}"  class="ui m-margin-top rounded image" alt="" style="width: 110px">-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--            &lt;!&ndash;博客运行时间统计&ndash;&gt;-->
<!--            <div class="four wide column">-->
<!--                <div style="font-size: large;font-weight: bold" class="ui inverted  m-text-thin m-text-spaced m-margin-top">客栈信息</div>-->
<!--                &lt;!&ndash;<p id="htmer_time" class="item m-text-thin"></p>&ndash;&gt;-->
<!--                <div id="blog-message">-->
<!--                    <div class="ui inverted link list" style="align-content: center;margin-top: 10px" th:fragment="blogMessage">-->
<!--                        <div class="m-text-thin" style="text-align: left;margin-left: 75px;">-->
<!--                            文章总数： <h2 class="ui orange header m-inline-block m-margin-top-null" style="font-size:medium;" th:text="${blogTotal}"> 14 </h2> 篇-->
<!--                        </div>-->
<!--                        <div class="m-text-thin" style="text-align: left;margin-left: 75px">-->
<!--                            访问总数： <h2 class="ui orange header m-inline-block m-margin-top-null" style="font-size:medium;" th:text="${blogViewTotal}"> 14 </h2> 次-->
<!--                        </div>-->
<!--                        <div class="m-text-thin" style="text-align: left;margin-left: 75px">-->
<!--                            评论总数： <h2 class="ui orange header m-inline-block m-margin-top-null" style="font-size:medium;" th:text="${blogCommentTotal}"> 14 </h2> 条-->
<!--                        </div>-->
<!--                        <div class="m-text-thin" style="text-align: left;margin-left: 75px">-->
<!--                            留言总数： <h2 class="ui orange header m-inline-block m-margin-top-null" style="font-size:medium;" th:text="${blogMessageTotal}"> 14 </h2> 条-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="ui inverted section divider"></div>-->
<!--        <div style="color: #F08047;margin-top: -18px" class="ui inverted m-text-thin m-text-spaced">我的客栈已营业：<span id="htmer_time" class="item m-text-thin"></span> (*๓´╰╯`๓)</div>-->
<!--        <a rel="nofollow" href="http://www.beian.miit.gov.cn" target="_blank">赣ICP备20004408号-1</a>-->
<!--    </div>-->
<!--    </div>-->

<!--</footer>-->


<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<script src="../static/js/background.js" th:src="@{/js/background.js}"/>

<script>

    $('#blog-message').load(/*[[@{/footer/blogmessage}]]*/"/footer/blogmessage");


    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });

    // 显示公众号
    $('.tencent').popup({
        popup : $('.tencent-qr'),
        position: 'bottom center'
    });

    // 显示微信
    $('.wechat').popup({
        popup : $('.wechat-qr'),
        position: 'bottom center'
    });

    // 显示QQ
    $('.qq').popup({
        popup : $('.qq-qr'),
        position: 'bottom center'
    });

    // 显示邮箱
    $('.email').popup();

    // 显示CSDN
    $('.csdn').popup();

    // 显示github
    $('.github').popup();




    // 运行时间统计
    function secondToDate(second) {
        if (!second) {
            return 0;
        }
        var time = new Array(0, 0, 0, 0, 0);
        if (second >= 365 * 24 * 3600) {
            time[0] = parseInt(second / (365 * 24 * 3600));
            second %= 365 * 24 * 3600;
        }
        if (second >= 24 * 3600) {
            time[1] = parseInt(second / (24 * 3600));
            second %= 24 * 3600;
        }
        if (second >= 3600) {
            time[2] = parseInt(second / 3600);
            second %= 3600;
        }
        if (second >= 60) {
            time[3] = parseInt(second / 60);
            second %= 60;
        }
        if (second > 0) {
            time[4] = second;
        }
        return time;
    }
    function setTime() {
        /*此处为网站的创建时间*/
        var create_time = Math.round(new Date(Date.UTC(2020, 01, 25, 15, 15, 15)).getTime() / 1000);
        var timestamp = Math.round((new Date().getTime() + 8 * 60 * 60 * 1000) / 1000);
        currentTime = secondToDate((timestamp - create_time));
        currentTimeHtml = currentTime[0] + '年' + currentTime[1] + '天'
            + currentTime[2] + '时' + currentTime[3] + '分' + currentTime[4]
            + '秒';
        document.getElementById("htmer_time").innerHTML = currentTimeHtml;
    }
    setInterval(setTime, 1000);


</script>
</body>
</html>
